<template>
    <div :class="className" style="width: 100%; height: 250px;" />
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '250px'
      },
      label: {
          type: Object,
          default: function () {
              return {
                  show: false,
                  length: 0,
                  length2: 0,
                  fontSize: 12,
                  backgroundColor: '#1890ff',
                  color: '#fff',
                  formatter: '{c|{d}%}',
              }
          }
      },
      full: {
          type: Object,
          default: function () {
              return {
                  color: ['rgba(255,255,255,0.15)'],
                  radius: ['51%', '70%'],
              }
          }
      },
      data: {
        type: Object,
        default: function () {
          return {
              name: '任务统计',
              color: ['#68abff', '#a490ff', '#fe5858', '#ffae00', '#2ed0d2'],
              showLabel: false,
              series: [
              { value: 320, name: '未进行' },
              { value: 240, name: '执行中' },
              { value: 149, name: '已完成' },
              { value: 100, name: '暂停' },
              { value: 220, name: '重启' },
              ],
          };
        },
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
    },
    watch: {
      data(newData, oldData) {
        this.initChart();
      },
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el)
  
        let legendArray =[]
        for(let x in this.data.series){
            legendArray.push(this.data.series[x].name)
        }
  
        this.chart.setOption({
          tooltip: {
            trigger: 'item',
            textStyle: {
                color: '#222',
            },
            backgroundColor: 'rgba(255,255,255,0.9)',
            borderColor: '#e2e7ec',
            borderWidth: 1,
            formatter: function(param) {
              return param.seriesName + '<br>' + param.marker + param.name + '：' + param.value + '(' + param.percent.toFixed(2) + '%)'
              // '{a} <br/>{b} : {c} (%)'
            }
          },
          legend: {
            icon: 'rect',
            itemGap: 13,
            data: legendArray,
            left: 'center',
            bottom: '0',
            itemWidth: 6,
            itemHeight: 20,
          },
          series: [
            {
              name: this.data.name,
              type: 'pie',
              color: this.data.color,
              center: ['50%', '45%'],
              radius: this.full.radius,
              avoidLabelOverlap: false,
              startAngle: 90,
              label: {
                normal: {
                  show: true,
                  formatter: this.label.formatter,
                  rich: {
                    c: {
                      fontSize: this.label.fontSize,
                      borderRadius: 100,
                      lineHeight: 20,
                      padding: [10, 3],
                      backgroundColor: this.label.backgroundColor,
                      color: this.label.color
                    }
                  }
                }
              },
              labelLine: {
                normal: {
                  show: this.label.show,
                  length: this.label.length,
                  length2: this.label.length2
                }
              },
              itemStyle: {
                shadowBlur: '8',
                shadowColor: 'rgba(0,0,0,0.2)'
              },
              data: this.data.series,
              animationEasing: 'cubicInOut',
              animationDuration: 2600
            }, {
              color: this.full.color,
              type: 'pie',
              center: ['50%', '45%'],
              radius: ['51%', '60%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(255, 255, 255, 1)',
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false,
              legendHoverLink: false,
              data: [{
                value: 1,
                name: ''
              }]
            }
          ]
        })
        var index = 0 // 播放所在下标
        setInterval(() => {
          this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0, // 第几条series
            dataIndex: index // 第几个tooltip
          })
          index++
          if (index > 3) {
            index = 0
          }
        }, 2000)
        window.addEventListener('resize', () => {
          this.chart.resize();
        });
      }
  
    }
  }
  </script>